<template>
  <div>
    <div class="text-16">
      <span v-if="config.title !== ''">{{ config.title }}</span>
      <span v-else>空值</span>
    </div>
    <a-divider style="background-color: #666"></a-divider>
    <div class="configuration">
      <ul class="flex flex-col gr-4">
        <li class="flex align-center justify-between">
          <div class="flex align-bottom">
            <div class="text-14 mr-4 title">文件名</div>
            <span class="text-999">文件夹的名字</span>
          </div>
          <a-input
            style="width: 200px"
            size="=small"
            @blur="setTitle"
            @enter="setTitle"
            v-model:value="folderConfig.title"
            placeholder="输入文件夹的名字"
          ></a-input>
        </li>

        <li class="flex align-top justify-between">
          <div class="flex align-bottom">
            <div class="text-14 mr-4 title">文件描述</div>
            <span class="text-999">针对文件夹的描述</span>
          </div>
          <a-textarea
            placeholder="输入文件夹的描述信息"
            :autoSize="{ minRows: 2, maxRows: 6 }"
            style="width: 200px"
            size="=small"
            v-model:value="config.desc"
          ></a-textarea>
        </li>
      </ul>
      <a-divider style="background-color: #666"></a-divider>
      <div>文件夹操作</div>
      <ul class="mt-8 actions flex gc-8 gr-4 flex-wrap">
        <li
          class="py-2 px-8 flex justify-between align-center flex-1"
          v-for="item in actionList"
          :key="item.text"
          :class="[item.class]"
          @click="item.action"
        >
          <div>
            <div class="text-14">{{ item.text }}</div>
            <div class="text-12 text-999 text-nowrap">
              {{ item.desc }}
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { deleteSelf } from "@/store/utils/project";
import { downloadText, formatCode } from "@/utils/utils";
import { message } from "ant-design-vue";
import { computed, ref } from "vue";
import { preview } from "../bus/bin";
import { showCompiledCode, showSourceCode, showUI } from "../bus/source";
import { setPropList, treeBus } from "../bus/treeData";

const config = computed(() => {
  return treeBus.selectItem;
});
const setTitle = () => {
  var title = folderConfig.value.title;
  if (title === "") {
    folderConfig.value.title = treeBus.selectItem.title;
  } else {
    treeBus.selectItem.title = folderConfig.value.title;
  }
};
const folderConfig = ref({
  title: ""
});

const actionList = ref([
  {
    text: "手机预览",
    action() {
      preview(treeBus.selectItem);
    },
    desc: "使用手机扫描二维码"
  },
  {
    text: "转编预览",
    action() {
      showCompiledCode(config.value);
    },
    desc: "显示有用的属性"
  },
  {
    text: "源码预览",
    action() {
      showSourceCode(config.value);
    },
    desc: "显示所有配置属性"
  },
  {
    text: "导出源码",
    action() {
      downloadText(formatCode(treeBus.selectItem), treeBus.selectItem.title + ".json");
    },
    desc: "导出源码作为示例"
  },
  {
    text: "界面预览",
    action() {
      if (config.value.children.length > 0) {
        setPropList(config.value.children);
        showUI();
      } else {
        message.warn("当下没有子文件");
      }
    },
    desc: "显示可视化配置界面"
  },
  {
    class: "danger",
    text: "删除文件夹",
    action() {
      deleteSelf(treeBus.selectItem);
      treeBus.selectItem = {};
    },
    desc: "将会删除文件夹下所有内容"
  }
]);
</script>

<style lang="scss" scoped>
.configuration {
  .title {
    width: 100px;
  }
}
.actions {
  li {
    background-color: #474747;
    border: 1px solid #979797;
    border-radius: 4px;
    cursor: pointer;
    &:hover {
      background-color: #383838;
    }
  }
  .danger {
    border: 1px solid #ef476f;
    color: #ef476f;
    &:hover {
      color: #fff;
      background-color: #ef476ed2;
      border: 1px solid white;
    }
  }
}
</style>
